<template>
	<view class="my">
    <Box title="个人信息" height="initial">
      <div class="userinfo">
        <u-avatar width="60" height="60" src="/static/avatar.png"></u-avatar>
        <div class="user-info">
          <div class="nickname">{{ userInfo.username}}</div>
          <div class="email">{{ userInfo.email}}</div>
        </div>
        <u-avatar size="mini" src="/static/logout.png" @click="logout"></u-avatar>
      </div>
    </Box>
		<Box title="考勤" height="initial">
      <view class="pecent">
        <qiun-data-charts
            type="gauge"
            :opts="option"
            :chartData="chartsDataGauge1"/>
      </view>
      <view class="pecent-list">
        <view class="pecent-item">
          <view class="pecent-item-content">{{ workData.normal || 0 }}</view>
          <view class="pecent-item-title">正常打卡</view>
        </view>
        <view class="pecent-item">
          <view class="pecent-item-content">{{ workData.early }}</view>
          <view class="pecent-item-title">早退</view>
        </view>
        <view class="pecent-item">
          <view class="pecent-item-content">{{ workData.leave }}</view>
          <view class="pecent-item-title">请假</view>
        </view>
        <view class="pecent-item">
          <view class="pecent-item-content">{{ workData.late }}</view>
          <view class="pecent-item-title">迟到</view>
        </view>
        <view class="pecent-item">
          <view class="pecent-item-content">{{ workData.notClock }}</view>
          <view class="pecent-item-title">旷工</view>
        </view>
        <view class="pecent-item">
          <view class="pecent-item-content">{{ workData.leave }}</view>
          <view class="pecent-item-title">休息</view>
        </view>
      </view>
    </Box>
    <Box title="员工分布" height="initial">
      <view class="pecent">
        <qiun-data-charts
            type="ring"
            :opts="ringOption"
            :chartData="chartsDataColumn4"
        />
      </view>
    </Box>
	</view>
</template>

<script>
	import Box from "../../components/box.vue";
  const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
  export default {
    components: {Box},
		data() {
			return {
        userInfo: {
          username: '',
          email: ''
        },
        chartsDataGauge1: {
          "categories": [{
            "value": 0,
            "color": "#1890ff"
          }, {
            "value": 0.8,
            "color": "#2fc25b"
          }, {
            "value": 1,
            "color": "#f04864"
          }],
          "series": [{
            "name": "完成率",
            "data": 121/166
          }]
        },
        option: {
          title:{
            name: '121/200',
            fontSize: 14,
            color: '#249CFF',
            offsetY: 0
          },
          subtitle:{
            name: '打卡人数',
            fontSize: 12,
            color: '#249CFF',
            offsetY: 0
          },
          extra:{
            gauge:{
              type:'progress',
              width:20,
              splitLine:{
                fixRadius:-10,
                width:15,
              },
              pointer: {
                width: 24,
                color: 'auto'
              },
              radius: '78%',
            }
          },
        },
        workData: {
          total: 0,
          online: 0,
          normal: 0,
          late: 0,
          leave: 0,
          early: 0,
          notClock: 0
        },
        commonOption: {
          legend: { show: false },
          padding: [50, 15, 10, 15],
          xAxis: {
            axisLineColor: '#B1B1B1',
            calibration: false,
            fontColor: '#B1B1B1',
            fontSize: 12,
            lineHeight: 20
          },
          yAxis: {
            disableGrid: true,
            data: [
              {
                calibration: false,
                fontColor: '#B1B1B1',
                fontSize: 12,
                lineHeight: 17
              }
            ]
          },
          extra: {
            column: {
              width: 10,
              barBorderCircle: true,
              barBorderRadius: [4, 4,0,0]
            }
          }
        },
        chartsDataColumn4: {}
			}
		},
    onShow() {
      this.userInfo = uni.getStorageSync('userInfo') || {};
      // 获取考勤数据
      this.getAttendanceData();
      // 员工年龄分布
      this.getAgeDistribution();
    },
    onLoad() {

    },
		methods: {
      logout() {
        // uni确认对话框
        uni.showModal({
          title: '提示',
          content: '确定退出登录吗？',
          success: (res) => {
            if (res.confirm) {
              uni.removeStorageSync('userInfo');
              uni.redirectTo({
                url: '/pages/user/login'
              })
            }
          }
        })
      },
      // 获取考勤数据
      getAttendanceData() {
        // 获取考勤数据
        this.$api.getAttendanceData().then(res => {
          console.log(res)
          this.workData = res
          this.option.title.name = res.normal + '/' + res.total;

        });
      },
      // 员工年龄分布
      getAgeDistribution() {
        this.$api.getAgeDistribution().then(res => {
          console.log(res)
          this.chartsDataColumn4 = {
            series: [
             {
                  name: "员工年龄分布",
                  data: res,
                  color: '#A0A0A0',
                  textColor: '#A0A0A0',
              }
            ]
          }
        });
      },
      ringOption() {
        return {
          ...this.commonOption,
          legend: {
            show: true,
            position: 'bottom',
            float: 'left'
          },
        }
      }
		}
	}
</script>

<style lang="scss">
.my {
  height: 100%;
  overflow: auto;
  background-color: #F8F9FD;
  padding: 30rpx;
  padding-top: 0;
  .userinfo {
    padding: 20px;
    padding-top: 0;
    display: flex;
    align-items: center;
    .user-info {
      flex-grow: 1;
      margin-left: 20rpx;
      margin-right: 20rpx;
      .nickname {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 30rpx;
        color: #000000;
        line-height: 40rpx;
      }
      .email {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 25rpx;
        color: #707070;
        line-height: 40rpx;
      }
    }
  }
  .pecent {
    height: 400rpx;
  }
  .pecent-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .pecent-item {
      width: 33%;
      margin-bottom: 40rpx;
      text-align: center;
      .pecent-item-content {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 23rpx;
        color: #707070;
        line-height: 40rpx;
      }
      .pecent-item-title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 25rpx;
        color: #000000;
        line-height: 40rpx;
      }
    }
  }
}
</style>
